<script lang="jsx" setup>
import { ref } from 'vue';
import GlobalInformation from './global-information.vue';
import ContractReviewSheet from './contract-review-sheet.vue';

const activeKey = ref('1');
</script>

<template>
  <div class="model-information h-full w-full">
    <ATabs v-model:activeKey="activeKey" type="card">
      <ATabPane key="1" tab="全局信息">
        <GlobalInformation />
      </ATabPane>
      <ATabPane key="2" tab="合同评审单">
        <ContractReviewSheet />
      </ATabPane>
      <ATabPane key="3" tab="预审信息">Content of Tab Pane 3</ATabPane>
    </ATabs>
  </div>
</template>

<style lang="scss" scoped>
.model-information {
  :deep(.ant-tabs) {
    .ant-tabs-nav {
      margin-bottom: 0;
    }

    .ant-tabs-content-holder {
      height: calc(100% - 40px);
      .ant-tabs-content {
        height: 100%;
        .ant-tabs-tabpane {
          height: 100%;
        }
      }
    }
    .ant-tabs-nav-list {
      .ant-tabs-tab {
        border-radius: 6px 6px 0 0;
      }
      .ant-tabs-tab-active {
        background: #646cff;
        .ant-tabs-tab-btn {
          color: #fff;
        }
      }
    }
  }
}
</style>
